<template>
  <div class="article_card">
    <div class="img_container">
      <TipsPanel v-if="error" icon=" ri-error-warning-line" tips="加载失败" />
      <img v-show="!error" :src="src" :alt="intro" @error="error = true" />
    </div>
    <span v-if="intro" class="article_title">{{ intro }}</span>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import TipsPanel from "./TipsPanel.vue";

export default {
  components: { TipsPanel },
  props: {
    intro: String,
    src: String
  },
  setup() {
    const data = reactive({
      error: false,
    })
    return { ...toRefs(data) }
  }
}
</script>

<style scoped lang="less">
.article_card {
  --image-start-scale: scale(1.3);
  --image-end-scale: scale(1.05);
  --image-transition: all 0.5s ease;

  --image-container-gap: 10px;
  --image-container-width: 200px;
  --image-container-height: 120px;
  --image-container-start-scale: scale(1.05);
  --image-container-end-scale: scale(1.1);
  --image-container-border-color: white;
  --image-container-radius: 15px;
  --image-container-transition: all 0.3s ease-in-out;

  &:hover,
  &:focus {
    .img_container {
      box-shadow: 0 0 0 2px var(--image-container-border-color);
      transform: var(--image-container-end-scale);
      img {
        object-position: center 5%;
        transform: var(--image-end-scale);
      }
    }
    .article_title {
      color: #f5d93b;
    }
  }

  &:active {
    .img_container {
      transition: all 0.1s ease-in-out;
      transform: var(--image-container-start-scale);
    }
  }

  display: inline-block;

  .img_container {
    cursor: pointer;
    overflow: hidden;
    margin: 10px 0;
    border: solid 4px transparent;
    width: var(--image-container-width);
    height: var(--image-container-height);
    border-radius: var(--image-container-radius);
    transform: var(--image-container-start-scale);
    transition: var(--image-container-transition);
    box-shadow: 0 0 0 0px var(--image-container-border-color);

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 20%;

      transform: var(--image-start-scale);
      transition: var(--image-transition);
    }
  }

  .article_title {
    color: white;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    transition: var(--image-container-transition);
  }
}
</style>